<template>
    <!--简易版本的大屏-->
 
    <el-row>
        <el-col :span="12">
            <!---饼状图-->
            <div id="main" style="width:100%; height:280px; "></div>
        </el-col>
        <el-col :span="12">
           <RightMgPie></RightMgPie>
        </el-col>
    </el-row>
    <el-row>
            <el-col :span="24">
                <!---下方柱状图-->
                <BottomBar></BottomBar>
            </el-col>
        </el-row>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { CategoryProApi } from '@/api'
import BottomBar from '@/components/BottomBar.vue';
import RightMgPie from '@/components/RightMgPie.vue';

onMounted(() => {
    CallCategoryProApi()
})

const initCart = (data: any) => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option: any;
    option = {
        title: {
            text: '商品类别统计图',
            subtext: '实时统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);

}

const CallCategoryProApi = () => {
    CategoryProApi.selectCate.call().then((res: any) => {
        console.log(res);
        initCart(res)

    })
}

</script>
<style scoped></style>